<template>
  <div class="panel-group-container">
    <mu-row gutter>

      <mu-col 
        v-for ='(k,i) in chartList'
        :key ='i'
        @click.stop.native = 'handleSetLineChartData(k.type)'
        width="100"
        tablet="50"
        desktop="25">
        <div class="icon-wrap" :class='k.className'>
          <mu-icon :size= '55' :value ='k.icon' :color = 'k.color'></mu-icon>
        </div>
        <div class="description">
          <p class="text">{{k.type}}</p>
          <count-to class="num" :startVal="0" :endVal="k.num" :duration="3600"></count-to>
        </div>
      </mu-col>

    </mu-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
export default {
  data() {
    return {
      chartList: [{
        type:'NewVisits',
        className:'people',
        icon:'person_add',
        num: 13600,
        color:'#BFA3A9'
      },{
         type:'Messages',
        className:'message',
        icon:'notifications_active',
        num: 12400,
        color:'#5DA0F0'
      },{
         type:'Purchases',
        className:'money',
        icon:'attach_money',
        num: 498200,
        color:'#BF6883'
      },{
         type:'Shoppings',
        className:'shoppingCard',
        icon:'shopping_cart',
        num: 29600,
        color:'#f6ab40'
      }]
    }
  },
  components: {
    CountTo
  },
  methods: {
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    }
  },
}
</script>

<style scoped lang = 'less'>
.panel-group-container {
  div[class*="col-"] {
    background-color: #fff;
    text-align: center;
    color: #000;
    padding: 8px;
    height: 108px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
    margin: 20px 0 10px 0;

    &:hover {
      .icon-wrap {
        .material-icons {
          color: #fff !important;
        }
      }

      .icon-wrap.people {
        background-color: #bfa3a9;
      }
      .icon-wrap.money {
        background-color: #bf6883;
      }
      .icon-wrap.message {
        background-color: #5da0f0;
      }
      .icon-wrap.shoppingCard {
        background-color: #f6ab40;
      }
    }
    .icon-wrap {
      padding: 12px 12px 2px 12px;
      margin-left: -20px;
      transition: all 0.4s ease-out;
      border-radius: 4px;
    }
    .description {
      p {
      }
      p.text {
        margin-bottom: 12px;
        line-height: 18px;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.45);
        font-weight: bold;
        text-align: left;
      }
      span.num {
        display: block;
        font-weight: bold;
        text-align: left;
        font-size: 20px;
        color: #666;
      }
    }
  }
}
</style>